{include file="index/header" /}
<link rel="stylesheet" type="text/css" href="__PUBLIC__css/jedate.css">
<script type="text/javascript" src="__PUBLIC__js/jquery.jedate.min.js"></script>
<body>
	<div class="panel admin-panel">
		<form method="get" action="" id="listform">
			<div class="panel-head"><strong class="icon-reorder"> {$user.know_remarks ?: $user.know_nickname}-{$user.know_phone ?: $user.know_email}</strong></div>
			<div class="padding border-bottom">
				<ul class="search" style="padding-left:10px;">
					<li> <a class="button border-main icon-plus-square-o" href="javascript:;" onclick="documents()"> 导出表格</a> </li>
					<li>搜索：</li>
					<li>
						<input type="month" placeholder="月份" name="time" value="{$param.time}" class="input"  style="width:250px; line-height:17px;display:inline-block;"/>
						<input type="hidden" name="id" value="{$param.id}">
						<a href="javascript:void(0)" class="button border-main icon-search" onclick="changesearch()" > 搜索</a>
					</li>
					<li>
						总节数：{$total} 总时长：<span class="sum">0</span>
					</li>
				</ul>
			</div>
			<div class="padding border-bottom">
				<div style="font-size:16px;">{$user.know_remarks ?: $user.know_nickname} <span class="alltime"></span></div>
				<div class="xian-data-bottom">
					<div id="xian-box" style="width:100%;height:400px;"></div>
				</div>
				<div style="text-align:center;">{$user.know_remarks ?: $user.know_nickname}的学习记录</div>
			</div>
			<table class="table table-hover text-center">
				<tr>
					<th>序号</th>
					<th>课程名</th>
					<th>专业</th>
					<th>阶段</th>
					<th>章节</th>
					<th>时间</th>
					<th>学习时长</th>
				</tr>
				{empty name="data"}
				<tr><td colspan="7">暂无数据</td></tr>
				{else /}
				{foreach $data as $k=>$v}
				<tr>
					<td>{$k+1}</td>
					<td>{$v.course_name}</td>
					<td>{$v.nav_name}</td>
					<td>{$v.type_name}</td>
					<td>{$v.s_name}</td>
					<td>{$v.time}</td>
					<td>{$v.record|Sec2Time=###}</td>
				</tr>
				{/foreach}
				<tr><td colspan="7">{$data->render()}</td></tr>
				{/empty}
				
			</table>
		</form>
	</div>
	<script type="text/javascript" src="__PUBLIC__admin/echarts.js"></script>
	<script>
		function documents(){
			$("#listform").attr('action','/admin/classes/documents');    //通过jquery为action属性赋值
			$("#listform").submit();
		}
		function changesearch(){
			$("#listform").attr('action','/admin/classes/record');    //通过jquery为action属性赋值
			$("#listform").submit();
		}
		$.ajax({
			data:{time:"{$param.time}",id:"{$param.id}"},
			url:"{:url('getsum')}",
			success:function(obj){
				$('.sum').text(obj);
			}
		})
		var pingDom = document.getElementById('xian-box');
		var pingChart = echarts.init(pingDom);
		var pingoption;
		pingoption = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					label: {
						backgroundColor: '#6a7985'
					}
				}
			},
			legend: {
				data: ['转化率']
			},
			xAxis: {
				type: 'category',
				data: []
			},
			yAxis: {
				type: 'value',
				axisLabel: {
					formatter: '{value} 节'
				}
			},
			series: [
			{
				data: [],
				type: 'line',
				itemStyle: {
					color: '#43b1ff'
				},
				label: {
					show: true,
					position: 'top',
					formatter: function(params){
						return (params.value)+'节';
					}
				},
			}
			]
		};

		pingoption && pingChart.setOption(pingoption);
		function refreshData2(){
			$.ajax({
				url:"{:url('echarts')}",
				data:{time:"{$param.time}",id:"{$param.id}"},
				success: function(obj){
					var pingoption = pingChart.getOption();
					pingoption.series[0].data = obj.x;
					pingoption.xAxis[0].data = obj.y;
					if(obj.y.length > 0) for (var i = obj.y.length - 1; i >= obj.y.length - 6; i--) {
						if(obj.y[i]) $('.alltime').append(obj.y[i]+': '+ obj.x[i]+'节 / ')
					}
					pingChart.setOption(pingoption);
				}
			});

		}
		refreshData2()
	</script>
</body></html>